<template>
  <div class="screen-index-box">
    <div class="one-box">
      <!--电厂主要设备状态-->
      <div class="scfh-data-box">
        <first-scfh></first-scfh>
      </div>
    </div>
    <div class="two-box">
      <!--供汽量-->
      <div class="hgcpkc-data-box">
        <first-hgcpkc></first-hgcpkc>
      </div>
    </div>
    <div class="three-box ">
      <!--发电量-->
      <div class="electricity-data-box">
        <first-electricity></first-electricity>
      </div>
    </div>
    <div class="four-map">
      <!--电站信息-->
      <div class="chinamap-data-box">
        <first-map ></first-map>
      </div>
    </div>
    <div class="five-box">
      <!--环保数据-->
      <div class="health-data-box">
        <first-health  ></first-health>
      </div>
    </div>
    <div class="six-box">
      <!--燃料消耗-->
      <div class="consumption-data-box">
        <first-consumption></first-consumption>
      </div>
    </div>
    <div class="seven-box">
      <!--监控轮播图-->
      <div class="shuffling-data-box">
        <first-shuffling ></first-shuffling>
      </div>
    </div>
  </div>
</template>
<script>
import firstScfh from "./components/firstNew/first-scfh";
import firstHgcpkc from "./components/firstNew/first-hgcpkc";
import firstElectricity from "./components/firstNew/first-electricity";
import firstMap from "./components/firstNew/first-map";

import firstHealth from "./components/firstNew/first-health";
import firstConsumption from "./components/firstNew/first-consumption";
import firstShuffling from "./components/firstNew/first-shuffling";
export default {
  components: {
    firstScfh,
    firstHgcpkc,
    firstHgcpkc,
    firstElectricity,
	firstMap,
	firstShuffling,
	firstConsumption,
	firstHealth,
  },
  data() {
    return {};
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.screen-index-box {
  width: 19200px;
  height: 3240px;
  box-sizing: border-box;
  //   background-color: #fff;
  background-color: #0e1825;
  position: relative;
   overflow: hidden;
  .one-box {
    width: 2380px;
    height: 100%;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
      padding: 0px 5px 9px 45px;
    box-sizing: border-box;

    .scfh-data-box {
      width: 100%;
      height: 100%;
    }
  }
  .two-box {
    width: 2380px;
    height: 3240px;
    // background-color: #fff;
    display: inline-block;
    vertical-align: top;
     padding: 0px 0px 9px 75px;
	margin: 0 70px 0 0;
    box-sizing: border-box;

    .hgcpkc-data-box {
      padding-left: 129px;
      width: 2380px;
      height: 3240px;
      overflow: hidden;
    }
  }
  .three-box {
    width: 2380px;
    height: 3240px;
    display: inline-block;
    vertical-align: top;
       padding: 0px 0px 9px 200px;
     box-sizing: border-box;

  .electricity-data-box{
	   
        width: 2380px;
      height: 3240px;
      overflow: hidden;
	 
  }
  }
  .four-map{
	margin:  0px 0px 4px 450px;
	   vertical-align: top;
	  width: 3900px;
	  height: 100%;
	  display: inline-block;
	//   background-color: rgb(236, 57, 57);
	  .chinamap-data-box{
         width: 100%;
		//   background-color: #fff;
	  }
  }
  .five-box {
    width: 2380px;
    height: 100%;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
     padding: 0px 5px 9px 250px;
    box-sizing: border-box;

    .health-data-box{
      width: 100%;
      height: 100%;
    }
  }
  .six-box {
    width: 2380px;
    height: 100%;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
     padding: 0px 5px 9px 230px;
    box-sizing: border-box;

    .shuffling-data-box {
      width: 100%;
      height: 100%;
    }
  }
   .seven-box {
    width: 2400px;
    height: 100%;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
     padding: 0px 5px 9px 230px;
    box-sizing: border-box;

    .scfh-data-box {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

